<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Table 表格3</title>
	<link rel="stylesheet" href="../../static/css/element2.css">
	<script src="../../static/js/vue.global.prod.js"></script>
	<script src="../../static/js/element-plue2.js"></script>
	
	<script src="../../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10"><div id="a_link"></div></el-affix><script src="table.js"></script>
	<el-divider content-position="left">筛选</el-divider><!-- =============================================================== -->
	<p class="desc">对表格进行筛选，可快速查找到自己想看的数据。</p>
	<p class="desc">在列中设置 filters 和 filter-method 属性即可开启该列的筛选， filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。</p>
	<el-button @click="resetDateFilter">重置Data的筛选</el-button>
	<el-button @click="clearFilter">重置所有筛选</el-button>
	<el-table ref="filterTable" row-key="date" :data="tableData" style="width: 100%">
		<el-table-column prop="date" label="Date" sortable width="180" column-key="date" :filters="filters_data" :filter-method="filterHandler"></el-table-column>
		<el-table-column prop="name" label="Name" width="180"></el-table-column>
		<el-table-column prop="address" label="Address" :formatter="formatter"></el-table-column>
		<el-table-column prop="tag" label="Tag" width="100" :filters="filters_tag" :filter-method="filterTag" filter-placement="top-end">
			<template #default="scope">
				<el-tag :type="scope.row.tag === 'Home' ? '' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
			</template>
		</el-table-column>
	</el-table>
	
	<el-divider content-position="left">自定义列模板</el-divider><!-- =============================================================== -->
	<p class="desc">自定义列的显示内容，可组合其他组件使用。</p>
	<p class="desc">通过 slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo</p>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="Date" width="180">
			<template #default="scope">
				<el-icon><timer /></el-icon>
				<span style="margin-left: 10px">{{ scope.row.date }}</span>
			</template>
		</el-table-column>
		<el-table-column label="Name" width="180">
			<template #default="scope">
				<el-popover effect="light" trigger="hover" placement="left">
					<template #default>
						<p>姓名: {{ scope.row.name }}</p>
						<p>住址: {{ scope.row.address }}</p>
						<p>现在位置：{{scope.row.tag}}</p>
					</template>
					<template #reference>
						<div class="name-wrapper">
							<el-tag size="medium">-- {{ scope.row.name }}</el-tag>
						</div>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="Operations">
			<template #default="scope">
				<el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
				<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<el-divider content-position="left">自定义表头</el-divider><!-- =============================================================== -->
	<p class="desc">表头支持自定义。通过设置 slot 来自定义表头。</p>
	<!-- <el-table style="width: 100%" :data="tableData.filter((data) => !search || data.name.toLowerCase().includes(search.toLowerCase()))"> -->
	<el-table style="width: 100%" :data="filterTableData2" border>
		<el-table-column label="Date" prop="date">
			<template #header="scope">
				<el-popover placement="top-start" :title="popover_title" :width="200" trigger="hover">
					<span>悬浮后出现的内容。。。</span>
					<template #reference>
						<span>
							<span>{{scope.column.label}}</span>
							<span style="color: red;">&nbsp; <el-icon><Pointer /></el-icon></span>
						</span>
					</template>
				</el-popover>
			</template>
			<template #default="scope">
				日期： <span style="color: red;">{{scope.row.date}}</span>
			</template>
		</el-table-column>
		<el-table-column label="Name" prop="name">
			<template #header="scope">
				<span>{{scope.column.label}}</span><span title="鼠标悬浮看看" style="color: red;">&nbsp; * 必填</span>
			</template>
		</el-table-column>
		<el-table-column prop="operation" label="操作" align="right">
			<template #header>
				<el-input v-model="search" size="mini" placeholder="Type to search" />
			</template>
			<template #default="scope">
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row, scope)">Edit</el-button>
				<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
			</template>
		</el-table-column>
	</el-table>
	
</div>
</body>
<script>

const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			value: '',
			fileIndex: 3,
			tableData: [
				{
					date: '2016-05-03',
					name: 'Tom1',
					address: 'No. 181, Grove St, Los Angeles',
					tag: 'Home',
				},
				{
					date: '2016-05-02',
					name: 'Tom2',
					address: 'No. 182, Grove St, Los Angeles',
					tag: 'Office',
				},
				{
					date: '2016-05-04',
					name: 'Tom4',
					address: 'No. 183, Grove St, Los Angeles',
					tag: 'Home',
				},
				{
					date: '2016-05-01',
					name: 'Tom3',
					address: 'No. 184, Grove St, Los Angeles',
					tag: 'Office',
				},
			],
			filters_data: [
				{ text: '2016-05-01', value: '2016-05-01' },
				{ text: '2016-05-02', value: '2016-05-02' },
				{ text: '2016-05-03', value: '2016-05-03' },
				{ text: '2016-05-04', value: '2016-05-04' },
			],
			filters_tag: [
				{ text: 'Home1', value: 'Home' },
				{ text: 'Office1', value: 'Office' },
			],
			search: '',
			popover_title: "这是popover_title。。。",
		}
	},
	computed:{
		btn(){
			return function(i){
				if(this.$data.fileIndex == i){
					return "layui-btn";
				}else{
					return "layui-btn0";
				}
			}
		},
		filterTableData(){
			return this.$data.tableData.filter(
				(data) => !this.$data.search || data.name.toLowerCase().includes(this.$data.search.toLowerCase())
			);
		},
		filterTableData2(){
			//和上面的方法功能相同，只是更好理解
			let THIS = this;
			return this.$data.tableData.filter(function(v,index){
				// return !THIS.$data.search || v.name.toLowerCase().includes(THIS.$data.search.toLowerCase())
				//用这一个更强大：搜索name和Date都可以
				return !THIS.$data.search || v.name.toLowerCase().includes(THIS.$data.search.toLowerCase()) || v.date.toLowerCase().includes(THIS.$data.search.toLowerCase())
			});
		}
	},
	methods:{
		//筛选
		resetDateFilter() {
			this.$refs.filterTable.clearFilter('date')
		},
		clearFilter() {
			this.$refs.filterTable.clearFilter()
		},
		formatter(row, column) {
			return row.address
		},
		filterTag(value, row) {
			//这种写法简单，易理解
			return row.tag === value
		},
		filterHandler(value, row, column) {
			//这种写法高级，推荐使用
			// console.log(value, row, column);
			const property = column['property']
			return row[property] === value
		},
		
		// 自定义列模板 && 自定义表头
		handleEdit(index, row, scope) {
			console.log(index, row);
			console.log(scope);
		},
		handleDelete(index, row) {
			console.log(index, row)
		},
		nameHeader(scope){
			console.log(scope);
		},
	},
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
app.mount("#app");
</script>
</html>
